<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/nav.css">
  <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
  <script src='../lib/bootstrap-3.3.5-dist/js/jquery-3.6.0.js'></script>
  <script src='../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js'></script>
  <script src='../javascript/nav.js'></script>
  <link rel="stylesheet" href="../css/font_sbdceyn3aud/iconfont.css">
  <title>导航</title>
</head>

<body>
  <div id="naviga">
    <div id='logo'>
      <img src="../image/logo.png" alt="">
    </div>
    <ul id="tushu" class="menu">
      <li>图书管理<span class="iconfont icon-xiala"></span></li>
      <li page-data='page1'>还书管理</li>
      <li page-data='page2'>借阅管理</li>
      <li page-data='page3'>新书入库</li>
      <li page-data='page4'>超期还书</li>
      <li page-data='page5'>销书管理</li>
      <li page-data='page6'>图书状态</li>
    </ul>
    <ul id="user" class="menu">
      <li>用户管理<span class="iconfont icon-xiala"></span></li>
      <li page-data='page7'>用户信息</li>
      <li page-data='page8'>黑名单用户</li>
      <li page-data='page9'>借阅记录</li>
      <li page-data='page10'>催还提醒</li>
    </ul>
  </div>
  <div id='top'>
    <div id='shot'>
      <img src="../image/touxiang2.png" alt="">
      <span id="name">
        叶小刀
      </span>
      <span class="iconfont icon-xiala"></span>
    </div>
  </div>
  <div id='main'>
    <div>
      还书管理
    </div>
    <div class="clear">
      <div id='opera'>
        <button>新增借阅</button>
        <button>批量删除</button>
      </div>
      <div id='enquiry'>
        <input type="text" placeholder="输入关键词">
        <button>查询</button>
      </div>
    </div>
    <table class="table table-striped" algin="center">
      <thead>
        <tr>
          <th><input type="checkbox" name="" id=""></th>
          <th>借阅卡号</th>
          <th>用户名</th>
          <th>还阅图书</th>
          <th>图书编号</th>
          <th>作者</th>
          <th>类别</th>
          <th>标签</th>
          <th>借阅日期</th>
          <th>是否续借</th>
          <th>续借天数</th>
          <th>应还日期</th>
          <th>实际还书日期</th>
          <th>超期天数</th>
          <th>是否丢失</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>
  </div>
  <script>
    let h = $(window).height()
    $('#naviga').css({
      'height': h + 'px',
    })

    $('.menu>li:first-child').on('click', function () {
      pullDown($(this))
    })
    $('.menu>li:first-child').siblings().on('click', function () {
      jumpPage($(this))
    })
      // let nowPage = sessionStorage.getItem('page')
      // nowPageOut($(`li[page-data$=${nowPage}]`))
  </script>
</body>

</html>